<template>

	<view style="flex: 1;flex-direction:column">
		<uni-card :title="mess.nickName">
			<h4 style="color: #999;">您好</h4>
			<h3 style="color: #999;">上次登录时间：2019-05-10</h3>
			<h3 style="color: #999;">上次操作：申请项目</h3>
		</uni-card>

		<uni-card title="设备详情">
			<view class="canvasView">
				<mpvue-echarts class="ec-canvas" :onInit="lineInit" canvasId="line" ref="lineChart" />
			</view>
		</uni-card>
		<uni-card title="系统详情">
			<span style="color: #999;">设备使用率</span>
			<progress percent="90.3" show-info stroke-width="3" activeColor="#09BB07" />
			<span style="color: #999;">设备损坏率</span>
			<progress percent="3.2" show-info stroke-width="3" activeColor="#f1e05a" />
			<span style="color: #999;">项目完成率</span>
			<progress percent="80.6" show-info stroke-width="3" activeColor="#007AFF" />
			<span style="color: #999;">人员活跃度</span>
			<progress percent="95.7" show-info stroke-width="3" activeColor="#FF0000" />
		</uni-card>

		<uni-card title="事项" >
			<view>
				<uni-list v-if='change2'>
					<uni-list-item v-for="item in thingList" :title="item.title" style="color: #999;" @click="listItemClick(item)"></uni-list-item>
				</uni-list>
			</view>
		</uni-card>

		<uni-collapse>
			<uni-collapse-item title="添加事务">
				<view class="uni-common-mt">
					<view class="uni-title uni-common-pl">选择对象</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								当前选择
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="name" v-if = "change">
									<view class="uni-input">{{name[index]}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="title">事务标题</view>
					<input class="uni-input" focus placeholder="输入" v-model="tempThing.title" />
					<view class="title">事务内容</view>
					<view class="uni-textarea">
						<textarea auto-height v-model="tempThing.content" />
						</view>
				</view>
				<view class="button-sp-area">
					<button class="landing" type="primary" @tap="updateThing()" style="font-size:25upx;">提交事务</button>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	
	import uniCard from '../../components/uni-card/uni-card.vue';
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import uniList from '../../components/uni-list/uni-list.vue'
	import uniListItem from '../../components/uni-list-item/uni-list-item.vue'
	import * as echarts from '../../components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue';
	import uLink from "../../components/uLink.vue";
	import uniCollapse from '../../components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	
		let lineOption = {
			  title : {
				  text: '设备详情',
			  },
			  tooltip : {
				  trigger: 'item',
				  formatter: "{a} <br/>{b} : {c} ({d}%)"
			  },
			  legend: {
				  x : 'center',
				  y : 'bottom',
				  data:['使用中','故障','空闲','维修中']
			  },
			  toolbox: {
				  show : true,
				  feature : {
					  mark : {show: true},
					  dataView : {show: true, readOnly: false},
					  magicType : {
						  show: true,
						  type: ['pie', 'funnel']
					  },
					  restore : {show: true},
					  saveAsImage : {show: true}
				  }
			  },
			  calculable : true,
			  series : [
				  {
					  name:'设备详情',
					  type:'pie',
					  radius : [8, 60],
					  roseType : 'radius',
					  label: {
						  normal: {
							  show: true
						  },
						  emphasis: {
							  show: true
						  }
					  },
					  lableLine: {
						  normal: {
							  show: true
						  },
						  emphasis: {
							  show: true
						  }
					  },
					  data:[
						  {value:100, name:'使用中'},
						  {value:5, name:'故障'},
						  {value:50, name:'空闲'},
						  {value:25, name:'维修中'}
					  ]
				  }
			  ]
	};
	

	export default {
		computed: {
			...mapState(['mess', 'thing', 'userName'])
		},
		components: {
			uniCard,
			uniIcon,
			uniList,
			uniListItem,
			mpvueEcharts,
			uLink,
			uniCollapse,
			uniCollapseItem,
		},
		data() {
			return {
				change2:false,
				change:true,
				index: 0,
				name:[],
				nickName:store.state.mess.nickName,
				thingList:[],
				tempThing:{
					object:'',
					title:'',
					content:'',
				},
				username: store.state.userName,
			}
		},
		onLoad() {
			this.getThing ();
			this.getNickName();
			
		},
		onReady() {
		},
		methods: {
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value
				this.tempThing.object = this.name[e.target.value];
			},

			
			lineInit(canvas, width, height) {
				echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				console.log(width,height);
				canvas.setChart(lineChart)
			
				lineChart.setOption(lineOption)
				return lineChart
			},
			getNickName(){
				uni.request({
					url: "http://115.159.219.165:8080/user/listNickName",
					method: 'GET',
					success: function(data) {
						//console.log(data);
						data.data.info.list;
						for(let i = 0;i<data.data.info.list.length;i++){
							this.name.push(data.data.info.list[i].nickname);
						}
						//console.log(this.name);
						this.change = false;
						this.$nextTick(function(){
							this.change = true;
						})
					}.bind(this)
				})
			},
			
			
			getThing (){
					uni.request({
					url: "http://115.159.219.165:8080/thing/listThing",
					method: 'POST',
					data:{
						nickName:"admin"
					},
					success: function(data) {
						//console.log(data);
						this.thingList = data.data.info.list;
						this.change2 = true;
						// this.$nextTick(function(){
						// 	this.change2 = true;
						// })
					}.bind(this)
				})
			},
			listItemClick(item){
				//console.log(item);
				store.commit('setThing', item);
				//console.log(store.state.thing);
				uni.navigateTo({
				    url: '../thingdetail/thingdetail'
				})
			},
			updateThing(){
				console.log(this.tempThing);
				uni.request({
					url: "http://115.159.219.165/thing/addThing",
					method: 'POST',
					data: this.tempThing,
					success: function(res) {
						uni.showToast({
							title: '提交事务成功',
							icon: 'success',
							duration: 2000
						});
						this.getThing();

					}.bind(this)
				})
				
			}

		}
	}
</script>

<style>
	
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	
	view {
		font-size: 28upx;
		line-height: inherit;
	}
	
	.example {
		padding: 0 30upx 30upx
	}
	
	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}
	
	.example .example-title {
		margin: 40upx 0
		
	}
	
	.example-body {
		padding: 0 40upx
	}
	
/* 	.title {
		margin-left: 30upx;
		color: #8f8f94;
	} */
	
	

	.canvasView {
		height: 320upx;
		flex: 1;
		flex-direction: column;
	}

	.ec-canvas {
		width: 100%;
		height: 100%;
		flex: 1;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.update-btn {
		margin-right: 30upx;
	}
	
	.button-sp-area {
		
		
		margin: 0 auto;
		width: 60%;
	}
	.title {
		padding: 10upx 25upx;
	}
	

</style>
